<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX</title>
</head>
<body>
  <div id="test1"></div>
  <div id="test2"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/javascript">
    // 1. 创建虚拟DOM
    /*方式一: 纯JS(一般不用)创建虚拟DOM元素对象*/
    const myId = 'react'

    var li1 = React.createElement('li', { key: 'one' }, 'one');
    var li2 = React.createElement('li', { key: 'two' }, 'two');
    var vDom = React.createElement('ul', { id: myId }, [li1, li2]);

    // 2. 渲染到真实页面
    const domContainer = document.getElementById('test1')

    ReactDOM.render(vDom, domContainer)
  </script>

  <script type="text/babel">
    // 1. 创建虚拟DOM
    /*方式二: JSX创建虚拟DOM元素对象*/
    const vDOM2 = 
      <ul id={myId.toUpperCase()}>
        <li key={'one'}>one</li>
        <li key={'two'}>two</li>
      </ul>

    // 2. 渲染到真实页面
    ReactDOM.render(vDOM2, document.getElementById('test2'))
  </script>
</body>
</html>